<template>

    <el-card class="box-card">
         <div style="height: 100%;background: white;">
            <div class="box-row-1">
                <el-form :model="searchForm" ref="searchForm">
                    <div class="box-form">
                        <div>
                            <el-form-item label="维修单编号" class="displayClass" prop="repair_code">
                                <el-input v-model="searchForm.repair_code" placeholder="请输入维修单编号"></el-input>
                            </el-form-item>
                            <el-form-item label="维修单名字" class="displayClass" prop="repair_name">
                                <el-input v-model="searchForm.repair_name" placeholder="请输入维修单名字"></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="设备编码" class="displayClass" prop="machinery_code">
                                <el-input v-model="searchForm.machinery_code" placeholder="请输入设备编码"></el-input>
                            </el-form-item>
                            <el-form-item label="设备名称" class="displayClass" prop="machinery_name">
                                <el-input v-model="searchForm.machinery_name" placeholder="请输入设备名称"></el-input>
                            </el-form-item>
                        </div>  

                        <div>
                            <el-form-item label="维修结果" class="displayClass" prop="repair_result">
                                <el-select v-model="searchForm.repair_result" placeholder="请选择维修结果" clearable>
                                    <el-option v-for="item in options" :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="单据状态" class="displayClass" prop="status">
                                <el-select v-model="searchForm.status" placeholder="请选择单据状态" clearable>
                                    <el-option v-for="item in opens" :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>

                        <el-form-item style="margin-top:60px;">
                            <el-button class="el-button--mini" type="primary" icon="el-icon-search" @click="submitForm('searchForm')">搜索</el-button>
                            <el-button class="el-button--mini" @click="resetForm('searchForm')" icon="el-icon-refresh">重置</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>

            <div class="box-row-2">
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-button @click="add" size="small" type="primary" icon="el-icon-plus" plain>新增</el-button>
                            <el-button size="small" type="success" icon="el-icon-edit" :disabled="isUDisable" @click="handleEdit(null,true)" plain>修改</el-button>
                            <el-button size="small" type="danger" icon="el-icon-delete" @click="DelAll"  :disabled="isDisable" plain>删除</el-button>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-button icon="el-icon-search"  size="small" circle></el-button>
                            <el-button icon="el-icon-refresh" size="small" circle></el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="box-row-3">
                <el-table 
                :data="tableData" 
                @selection-change="handleSelectionChange" 
                height='calc(100vh - 300px)' ref="dataTable" v-loading="isloading" >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column fixed prop="repair_code" label="维修单编号" width="180" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="repair_name" label="维修单名字" width="100" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="machinery_code" label="设备编号" width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="machinery_name" label="设备名字" width="100" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="require_date" label="报修日期" width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="finish_date" label="维修完成日期" width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="confirm_date" label="验收日期" width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="repair_result" label="维修结果" width="100" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="accepted_by" label="维修人员" width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="confirm_by" label="验收人员" width="100" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="status" label="单据状态" width="80" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status == 0 ? 'primary' : 'danger'" disable-transitions>
                                <div v-if="scope.row.status == 0">草稿</div>
                                <div v-if="scope.row.status == 1">已确认</div>
                                <div v-if="scope.row.status == 2">审核中</div>
                                <div v-if="scope.row.status == 3">已审核</div>
                                <div v-if="scope.row.status == 4">已完成</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" type="text" size="small" icon="el-icon-edit">修改</el-button>
                            <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="box-row-3-pagination">
                    <Pagination  :pageindex="PageIndex" :pagesize="PageSize" :total="total"  @CurrentChange="CurrentChange" @SizeChange="SizeChange" />
                </div>
            </div>

        </div>


        <el-dialog width="50%" height="45%" :title="title" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="false">
          <Dialog :model="model" :tableData="lineList" @closeDialog="closeDialog"  @dataBind="dataBind" :searchForms="searchForms"  :adds="adds" :isUpdate="isUpdate" :islook="islook" :isShow="InputIsShow"/>
        </el-dialog>


    </el-card>
</template>

<script>
import Pagination from '../../components/Pagination.vue'
import Dialog from './components/RepairOrderDialog.vue'

export default {
    components:{
        Pagination,
        Dialog
    },
    data(){
        return{
            options:[{
                    value: '0',
                    label: '维修成功'
                },{
                    value:'1',
                    label:'报废'
                }
            ],
            opens:[{
                    value: '0',
                    label: '草稿'
                },{
                    value:'1',
                    label:'已确认'
                },{
                    value:'2',
                    label:'审核中'
                },{
                    value:'3',
                    label:'已审核'
                },{
                    value:'4',
                    label:'已完成'
                }
            ],
            searchForm:{
                line_id:'',
                repair_id:'',
                repair_code:'',
                repair_name:'',
                machinery_code:'',
                machinery_name:'',
                repair_result:'',
                status:''
            },
            searchForms:{
                line_id:'',
                repair_id:'',
                subject_code:'',
                subject_name:'',
                malfunction:'',
                malfunction_url:'',
                repair_des:''
            },

            model:{
                line_id:'',
                repair_id:'',
                machinery_id:'',
                machinery_type_id:'',
                repair_code:'',
                repair_name:'',
                machinery_code:'',
                machinery_name:'',
                require_date:'',
                finish_date:'',
                subject_name:'',
                malfunction:'',
                malfunction_url:'',
                repair_des:'',
                confirm_date:'',
                repair_result:'',
                accepted_by:'',
                confirm_by:'',
                status:''
            },
            tableData: [],

            lineList:[],
            title:'新增维修单',
            dialogFormVisible:false, //是否显示弹窗
            isUpdate:false,
            islook:true,
            InputIsShow:false,
            PageIndex:1,//当前页数
            PageSize:10,//每页显示条数
            total:0,//总条数
            isDisable:true,
            isUDisable:true,//是否修改
            isloading:true
        }
    },
    methods:{
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    this.dataBind();
                }else{
                    console.log('err')
                }
            })
        },
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
        //监听dataTable是否有选中项
        handleSelectionChange(val){
            if(val.length > 0){
                this.isDisable = false;
            }
            else if(!val.length){
                this.isDisable =true;
            }
            let isTrue = val.length ===1 ? false:true;
            this.isUDisable= isTrue;
        },
        dataBind(){
            this.isloading=true,
            this.$http.request({
                type:'get',
                url:'/api/RepairOrder',
                params:{
                    repair_code:this.searchForm.repair_code,
                    repair_name:this.searchForm.repair_name,
                    machinery_code:this.searchForm.machinery_code,
                    machinery_name:this.searchForm.machinery_name,
                    repair_result:this.searchForm.repair_result,
                    status:this.searchForm.status,
                    PageIndex:this.PageIndex,
                    PageSize:this.PageSize
                }
            }).then(res=>{
                console.log(res);
                if(res.data.code==200){
                    this.tableData = res.data.data;
                    this.total = res.data.count;
                }
            }).catch(err=>{
            }).finally(()=>{
                this.isloading=false;
            })
        },
        SizeChange(e){
            this.PageSize = e;
            console.log('1');
            //从第一页开始
            this.PageIndex = 1;
            this.dataBind();
        },
        CurrentChange(e){
            console.log('1');
            this.PageIndex = e;
            this.dataBind();
        },
        closeDialog(){
            this.dialogFormVisible=false;
        },
        add(){
            this.title='新增设备',
            this.isUpdate=false,
            this.islook=false,
            this.dialogFormVisible = true;
        },
        adds(){
            this.title='添加设备维修单行',
            this.isUpdate=false,
            this.islook=false
        },
        handleEdit(e){
            this.title='修改设备'
            this.model=JSON.parse(JSON.stringify(e))
            this.isUpdate=true,
            this.islook=true,
            this.dialogFormVisible=true

            this.getLine(e.repair_id);
        },
        getLine(repair_id){
            this.$http.request({
                type:'get',
                url:'/api/RepairOrder/GetLine',
                params:{
                    repair_id:repair_id
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.lineList = res.data.data;
                }
            }).catch(err=>{
            })
        },
        del(model){
            console.log(model)
            let Id = model.repair_id
            if(Id != undefined){
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                    })
                .then(()=>{
                    const loading =this.$loading();
                    this.$http.delete('/api/RepairOrder',{params:{Id:Id}})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.dataBind();
                            }else{
                                this.ShowMsg(res.data.msg,'warning');
                            }
                        }).catch(err=>{
                            this.ShowMsg('服务器异常，稍后重试','error');
                        }).finally(()=>{
                            setTimeout(()=>{
                                loading.close();
                            },500);
                        })
                }).
                catch(()=>{})
            }
            else{
            }
        },//删除多条数据
        DelAll(){
            if(this.$refs.dataTable.selection.length > 0){
                let ids = this.$refs.dataTable.selection.map(x=>x.repair_id);
                console.log(ids);
                this.$confirm('此操作将永久删除该数据, 是否继续?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                })
                .then(()=>{
                    const loading =this.$loading();
                    this.$http.delete('/api/RepairOrder/DelAll',{params:{Id:ids.join(',')}})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.dataBind();
                            }else{
                                this.ShowMsg(res.data.msg,'warning');
                            }
                        }).catch(err=>{
                            this.ShowMsg('服务器异常，稍后重试','error');
                        }).finally(()=>{
                            setTimeout(()=>{
                                loading.close();
                            },500);
                        })
                }).
                catch(()=>{})
            }
        }
    },
    created(){
        this.dataBind();
    }
}
</script>

<style scoped>
.box-card{
    height: 99%;
}
.box-form{
    display: flex;
    align-items: center;
}
.displayClass{
    display: flex;
    margin-right:15px;
}
.displayClass input{
    width:235px;
    height:35px;
}
.el-button--mini{
    padding:10px 20px;
}
.bg-purple-light{
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
}
.box-row-3,.box-row-3-pagination{
    margin-top:10px;
}
</style>